.setter-environment-select {
  width: 100%;

  .like-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    transition: all ease 0.3s;

    .like-value {
      overflow: hidden;
      color: #262626;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .like-placeholder {
      color: #c8c8c8;
    }

    .clear-btn {
      display: none;
      cursor: pointer;

      &:hover {
        color: #b1b1b1 !important;
      }
    }

    .more-btn {
      display: block;
    }

    &:hover {
      border-color: var(--ant-primary-5);

      .clear-btn {
        display: block;
      }

      .more-btn {
        display: none;
      }
    }
  }
}

.setter-environment-select-model {
  .model-box {
    width: 100%;
    height: 100%;

    .content {
      display: flex;
      height: 100%;
      overflow: hidden;
      background-color: #fff;
      border: 1px solid #ddd;

      .left-tree {
        width: 185px;
        min-width: 185px;
        max-width: 185px;
        height: 100%;
        font-size: 12px;
        background-color: #fff;
        border-right: solid 1px #ddd;

        > p {
          display: flex;
          align-items: center;
          width: 100%;
          height: 40px;
          margin-bottom: 0;
          padding-left: 9px;

          > span {
            margin-left: 7px;
            font-size: 12px;
          }
        }

        .app-selected {
          background-color: var(--ant-primary-1);
        }

        .app-selected:hover {
          background-color: var(--ant-primary-color-active-deprecated-d-02);
        }

        .left-group-box {
          width: 100%;
          height: 100%;
          overflow-y: auto;

          .group-item {
            display: flex;
            align-items: center;
            height: 32px;
            margin-bottom: 0;
            padding: 0 0 0 20px;
            cursor: pointer;

            > span {
              overflow: hidden;
              font-size: 12px;
              white-space: nowrap;
              text-overflow: ellipsis;
            }

            &:hover {
              background-color: rgba(0, 0, 0, 0.02);
            }
          }

          .active {
            background-color: var(--ant-primary-1);
            background-color: #e7f3ff;
          }

          .active:hover {
            background-color: var(--ant-primary-color-active-deprecated-d-02);
            background-color: #e7f3ff;
          }
        }

        :global {
          .ant-spin-nested-loading {
            height: 100%;

            .ant-spin-container {
              height: 100%;
            }
          }
        }
      }

      .right-nav {
        display: flex;
        flex: 1;
        flex-direction: column;
        overflow: hidden;

        :global {
          .ant-spin-nested-loading {
            height: 100%;

            .ant-spin-container {
              display: flex;
              flex-direction: column;
              height: 100%;
              overflow: hidden;

              .ant-table-wrapper {
                height: 390px;
              }

              .ant-table {
                border-top: 1px solid rgba(0, 0, 0, 0.06);
              }

              .ant-table-placeholder > td {
                border-color: transparent;
              }

              .ant-table-thead > tr > th {
                padding: 8px 11px;
                color: #666;
                font-size: 12px;
                line-height: 23px;
              }

              .ant-table-tbody > tr.ant-table-row-selected > td {
                background: #e7f3ff;
              }

              .ant-table-tbody > tr.ant-table-row-selected:hover > td {
                background: #e7f3ff;
              }

              .ant-table-tbody > tr {
                cursor: pointer;

                > td {
                  padding: 8px 11px;
                  font-size: 12px;
                  line-height: 23px;

                  div.ant-typography,
                  .ant-typography p {
                    margin-bottom: 0;
                    font-size: 12px;
                  }
                }
              }
            }
          }

          .ant-input-affix-wrapper {
            width: 260px;
            margin: 10px;

            > input {
              font-size: 12px;
              line-height: 22px;
            }

            svg {
              font-size: 16px;
            }
          }

          .ant-empty {
            margin-top: 64px;
          }

          .ant-spin-dot {
            font-size: 20px;
          }
        }
      }
    }
  }

  ::-webkit-scrollbar {
    width: 6px;
  }
}
